<template>
  <div class='addAddress'>
    <x-header>{{isAdd?'新增收货地址':'编辑收货地址'}}</x-header>
    <group>
      <cell title="用户名" is-link value="王小姐"></cell>
      <cell title="电话号码" is-link value="13411123113"></cell>
      <x-address title="地区" v-model="address" raw-value :list='list' placeholder='请选择地区'></x-address>
      <x-textarea title="详细地址" v-model="detail" :rows='2'></x-textarea>
      <x-switch title="默认地址" v-model="isDefault"></x-switch>
    </group>
    <x-button class="addressBtn" type='primary' @click.native="onSubmit">保存</x-button>
    <toast v-model="show" type="success">保存成功</toast>
  </div>
</template>

<script>
import { ChinaAddressV4Data, XSwitch } from 'vux';
import { setTimeout } from 'timers';
export default {
  components: { XSwitch },
  data() {
    return {
      isAdd: true,        //是否是编辑状态
      show: false,         //保存提示显示
      name: '',           //用户名
      phone: '',          //电话号码
      address: [],        //地区
      detail: '',         //详细地址
      isDefault: false,   //是否默认地址
      list: ChinaAddressV4Data,   //地区数据
    }
  },
  beforeMount() {
    if (this.$route.query.edit) {
      this.isAdd = false;
      this.name = '张小姐';
      this.phone = '13511111111';
      this.address = ['湖南省', '长沙市', '芙蓉区'];
      this.detail = '车站北路证券大厦4楼方正证券';
      this.isDefault = true;
    }
  },
  methods: {
    //新增／编辑保存
    onSubmit() {
      this.show = true;
      setTimeout(() => {
        this.$router.push('/receivingAddress')
      },1500)
    }
  }
}
</script>

<style lang="less" scoped>
.addressBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
